<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card style="margin: 20px 0">
      <el-button type="primary" style="margin: 20px 0" @click="addCate">添加分类</el-button>
      <tree-table :data="cateList" :columns="columns" :selection-type="false"
      :expand-type="false" show-index border index-text="#">
        <template slot="isok" slot-scope="{row}">
            <i class="el-icon-success" style="color:green" v-if="row.cat_deleted"></i>
            <i class="el-icon-error" style="color:red" v-else></i>
        </template>
        <template slot="sort" slot-scope="{row}">
            <el-tag type="success" v-if="row.cat_level == 0">一级</el-tag>
            <el-tag type="warning" v-else-if="row.cat_level == 1">二级</el-tag>
            <el-tag type="orange" v-else>三级</el-tag>
        </template>
        <template slot="operation" slot-scope="{row}">
            <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
        </template>
      </tree-table>
    </el-card>
    <!-- 分页器 -->
    <el-pagination
      align="center"
      :current-page="cateInfo.pagenum"
      :page-sizes="[2, 3, 6]"
      :page-size="cateInfo.pagesize"
      :pager-count="5"
      layout="  jumper,prev, pager, next, total,sizes"
      :total="total"
      @current-change="getCateList"
      @size-change="handleSizeChange"
    >
    </el-pagination>
    <!-- 添加按钮的对话框 -->
    <el-dialog
      title="提示" :visible.sync="dialogVisible" width="50%" @close="closeCateDialog">
      <el-form ref="Cateform" label-width="100px" :model="addCateForm">
        <el-form-item label="分类名称：">
          <el-input  v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类：">
            <!-- 多级选择器 -->
          <el-cascader v-model="selectKeys" clearable :options="goodsCateList" :props="prop"
          @change="changeSelect">
          </el-cascader>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="!addCateForm.cat_name" @click="saveAddCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "cate",
  data() {
    return {
      // 储存商品列表的数据
      cateList: [],
      //   发起商品数据的请求参数
      cateInfo: {
        // 第几级
        type: 3,
        // 当前页
        pagenum: 1,
        // 每页显示多少条数据
        pagesize: 3,
      },
      total:0,
      // 添加按钮的对话框
      dialogVisible:false,
      // 收集添加分类的信息
      addCateForm:{
          // 分类名称
        cat_name:'',
        // 父级分类ID
        cat_pid: '0',
        cat_level:'0'
      },
      // 储存商品分类的二级数据
      goodsCateList:[],
      prop:{ expandTrigger: 'hover',
            value: 'cat_id',
            label:'cat_name', 
            children: 'children'
      },
      // 选择器选中的值的id
      selectKeys:[],
      // table指定列的定义
      columns:[
        {
        label:'分类名称',
        prop:'cat_name'
        },
        {
            label:'是否有效',
            // 当前页类型为模板
            type:'template',
            width:'80',
            template:'isok'
        },
        {
            label:'排序',
            type:'template',
            template:'sort'
        },
        {
            label:'操作',
            type:'template',
            template:'operation'
        }
      ],
    }
  },
  methods: {
    // 获取展示到table的商品数据
    async getCateList(pager = 1) {
      this.cateInfo.pagenum = pager
      let { data: result } = await this.$API.get("categories",{params:this.cateInfo})
      if (result.meta.status == 200) {
        this.cateList = result.data.result
        this.total = result.data.total
      }
    },
    // 当选择每页展示多少条数据的回调
    handleSizeChange(limit){
        this.cateInfo.pagesize = limit
        this.getCateList()
    },
    // 添加按钮的函数
    async addCate(){
      // 获取两级商品数据
      this.dialogVisible = true
      let { data: result } = await this.$API.get("categories",{params:{type:2}})
      if(result.meta.status !== 200){
        return this.$message.error('请求数据失败')
      }
      this.goodsCateList = result.data
    },
    // 选择器选择改变时的回调
    changeSelect(value){
        this.addCateForm.cat_pid = value[1]
        this.addCateForm.cat_level = 3
      },
      // 发起添加分类确定按钮
      async saveAddCate(){
        this.dialogVisible = false
        let {data:result} = await this.$API.post('categories',this.addCateForm)
        if(result.meta.status != 201){
          return this.$message.error('请求数据失败')
        }
        this.$message.success('添加分类成功')
      },
      // 对话框关闭的回调
      closeCateDialog(){
        // 重置表单的信息
        this.$refs.Cateform.resetFields()
        // 请空选择器选中的id
        this.selectKeys = []
      }
  },
  mounted() {
    this.getCateList()
  },
};
</script>

<style>
.el-cascader-panel{
  height: 200px;
}
</style>